<template>
	<view>
		<view class="list">

			<view v-for="(item,index) in list" class="item">
				<view>
					<view class="title">{{item.theme}}</view>
					<view>活动时间：{{item.starttime}}</view>
					<view>地点：{{item.address}}</view>
					<view>人数：{{item.total_member}}</view>

					<u-row gutter="10">
	
						<u-col span="4">
							<button class="youqu-color" size="mini" @click="gotoDetail(item)">查看</button>
						</u-col>
					</u-row>
					
				</view>

			</view>
		</view>


		<EmptyData v-if="this.list.length == 0" />
	</view>

</template>

<script>

	import * as EventApi from '@/api/event.js';
	import EmptyData from '@/components/common/EmptyData.vue'
	export default {
		components: {
			EmptyData
		},
		props: {
			member_nid: {
				type: Number
			},
	
		},
		data() {
			return {
				page: 1,
				list: []
			}
		},
        created() {
            console.log('组件创建后，但还未挂载')
			this.getList()
        },
        beforeMount(){
            console.log('渲染后待挂载')
        },
		onReachBottom() {
			this.page++
			this.getList()
		},

		methods: {

			gotoDetail(item) {
				uni.navigateTo({
					url: '/pages/myactivity/detail?id=' + item.id
				})
			},
			getList() {
				let that = this;
				EventApi.user_list({member_nid: this.member_nid}).then(res => {
					that.list = res.info
				})

			},
		}
	}
</script>

<style scoped lang="scss">
	.list {
		.item {

			padding: 40rpx;
			border-radius: 15rpx;
			background-color: #FFFFFF;
			margin-top: 40rpx;
			box-shadow: 0 0 15rpx #C0C0C0;

			view {
				font-size: 26rpx;
				line-height: 50rpx;
				color: #C0C0C0;
			}

			.title {
				font-size: 32rpx;
				font-weight: bold;
				color: #000;
			}

			.qx-btn {
				margin-top: 20rpx;
				width: 150rpx;
				display: flex;
			}

			.youqu-color {
				background-color: #ffd91d;
			}
		}

	}
</style>